const { defineConfig } = require("@vue/cli-service");
// 压缩
const CompressionPlugin = require("compression-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
// 打包分析
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
// 环境变量
const Dotenv = require('dotenv-webpack');

const path = require("path");

const resolve = (dir) => path.join(__dirname, dir);


const assetsCdn = {
  // 放置需要使用 cdn 的库
  css: [
    // 存放 引用 css文件的地址
    // "https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.7/index.min.css",
  ],
  js: [
    // 存放 引用 js 文件的地址
    // "https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js",
    // "https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js",
    // "https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.7/index.full.min.js",
    // "https://cdn.bootcdn.net/ajax/libs/vue/3.2.13/vue.cjs.min.js",
    // "https://cdn.bootcdn.net/ajax/libs/vuex/4.0.0/vuex.cjs.min.js",
    // "https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.3/vue-router.cjs.min.js",
  ],
};

module.exports = defineConfig({
  productionSourceMap: true,
  transpileDependencies: true,
  lintOnSave: false,
  pwa: {
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true,
    }
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('autoprefixer')
        ]
      }
    }
  },
  chainWebpack: (config) => {
    // 移除 prefetch 插件, 否则资源会预加载
    config.plugins.delete("prefetch"),
    config.plugins.delete("preload"),
  
    // 别名 配置
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@utils", resolve("src/utils"))
      .set("@assets", resolve("src/assets"))
      .set("@views", resolve("src/views"));

    config.optimization.splitChunks({
      chunks: "all", // 可以是`async`（仅分割异步加载模块），`initial`（仅分割初始加载模块），或`all`（两者都分割）
      minSize: 20000, // 生成chunk的最小体积（以字节为单位）
      minChunks: 1, // 在分割之前，模块被共享的最少次数
      maxAsyncRequests: 30, // 按需加载时的最大并行请求数
      maxInitialRequests: 30, // 入口点的最大并行请求数
      automaticNameDelimiter: "~", // 默认情况下，webpack将使用块的来源和名称生成名称（例如vendors~main.js）
      cacheGroups: {
        // 缓存组可以继承和/或覆盖splitChunks.*的任何选项
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        lodash: {
          name: "lodash",
          test: /[\\/]node_modules[\\/]lodash[\\/]/,
          priority: 3,
          reuseExistingChunk: true,
          maxInitialRequests: 20,
        },
        moment: {
          name: "moment",
          test: /[\\/]node_modules[\\/]moment[\\/]/,
          priority: 3,
          reuseExistingChunk: true,
          maxInitialRequests: 20,
        },
        "element-plus": {
          name: "element-plus",
          test: /[\\/]node_modules[\\/]element-plus[\\/]/,
          priority: 3,
          reuseExistingChunk: true,
          maxInitialRequests: 20,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    });
    // cdn 配置
    config.plugin('html').tap(args =>{
      args[0].cdn = assetsCdn;
      return args
    })
    // 开启打包分析
    if (process.env.NODE_ENV === 'production') {
      // config.plugin('bundle-analyzer').use(BundleAnalyzerPlugin);
    }
    
  },
  configureWebpack: {
    plugins: [
      new Dotenv({
        path: process.env.NODE_ENV === 'development' ? '.env.development' : '.env.production',
      }),
      // 开启gizp
      new CompressionPlugin({
        algorithm: "gzip", // 使用gzip压缩
        test: /\.js$|\.html$|\.css$/, // 匹配文件名
        filename: "[path][base].gz[query]", // 压缩后的文件名(保持原文件名，后缀加.gz)
        minRatio: 1, // 压缩率小于1才会压缩
        threshold: 1024 * 10, // 对超过10k的数据压缩
        deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
      }),
      // 代码压缩去除console，debugger，注释等
      new TerserPlugin({
        // 开启多进程打包,项目较大下打开
        parallel: false,
        terserOptions: {
          compress: {
            drop_console: true, // 移除所有 console.* 语句
            drop_debugger: true, // 移除 debugger 语句
          },
          output: {
            comments: false, // 不保留任何注释
          },
        },
      }),
     
    ],
    externals: {
      // Vue: "vue", // 此处注意Vue 需要大写
      // vuex: "Vuex",
      // "vue-router": "vueRouter",
      // "element-plus": "ElementPlus",
      // moment: "moment",
      // axios: "axios",
    },

  },
 
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@assets/css/mixin.scss";`, // 引入全局 SasS 变量的文件（对应你全局文件的路径）
      },
    },
  },
  devServer: {
    host: "localhost",
    port: "8087",
    proxy: {
      "/business": {
        // /api 表示拦截以/api开头的请求路径
        target: "https://app.qinglanguoji.cn", // 跨域的域名
        changeOrigin: true, // 是否开启跨域
      },

    },
    client:{ overlay: false }
  },
});
